<template>
  <section>
    <!--应该是报告模板的所有page-->
    <el-form label-width="40px" size="mini">
      <el-form-item label="标题">{{template.title}}</el-form-item>
      <el-form-item label="内容">
        <el-button size="mini" @click="addPageBtn" type="primary" style="margin-bottom: 10px">+</el-button>
        <el-tabs type="border-card" v-if="template.templateData" closable @tab-remove="handleTabsEdit" v-model="tabName">
          <el-tab-pane v-for="(page,index) in template.templateData" :key="index" :label="page.title"  v-if="template.templateData.length>0" :name="page.title">
            <page :currPage="page" v-if="tabName === page.title"></page>
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="success" @click="saveBtn">保存</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'
  import errHandler from '@/assets/errHandler'
  import page from './page'
  export default {
    name: "index",
    components:{page},
    computed:{
      editId(){
        return this.$route.params.id
      },
    },
    data(){
      return{
        template:{},
        templateData:null,
        tabName:null
      }
    },
    created(){
      this.getReportTemplate(this.editId)
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      getReportTemplate(id){
        this.fetch({name:"getReportTemplate",data:{id}})
          .then(res=>{
            console.log('当前模板-------',res)
            if(!res.templateData){
              res.templateData=[]
            }else {
              res.templateData=JSON.parse(res.templateData)
            }
            this.template=res
            this.tabName=this.template.templateData[0].title
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addPageBtn(){
        let page={title:this.template.templateData.length+1+'页面',widgets:[]}
        this.template.templateData.push(page)
        this.tabName=page.title
      },
      saveBtn(){
        let data={id:this.template.id,title: this.template.title,templateData:JSON.stringify(this.template.templateData)}
        this.updatemReportTemplate(data)
      },
      updatemReportTemplate(data){
        this.fetch({name:"updatemReportTemplate",data})
          .then(res=>{
            this.$message({type:'success',message:'更新成功！'})
            // this.$router.push('/report-management/edit/'+res.id)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      handleTabsEdit(a){
        console.log('动态增减选项卡------------',this.template.templateData)
        let index = this.template.templateData.findIndex(t=>t.title === a)
        if(index <0){
          this.$message({type:'error',message:'该页面未找到或已删除！'})
          return
        }
        this.template.templateData.splice(index,1)
      }
    }
  }
</script>

<style scoped>

</style>
